<template>
  <div class="import-history">
    <div class="import-history__hd">
      <span class="import-history__title">
        {{ $t('components.WkImport.b32ace8b95b4cefb8c5e4df9d972e318') }}
      </span>
      <span class="import-history__des">
        {{ $t('components.WkImport.4a935c287fd7b578cdff743d9e200245') }}
      </span>

      <el-button
        class="xr-icon-close-btn"
        icon="el-icon-close"
        @click="closeClick" />
    </div>

    <el-table
      :data="tableList"
      class="import-history__bd"
      height="250"
      style="width: 100%;">
      <el-table-column
        prop="createTime"
        :label="$t('components.WkImport.be7528bb14a7bbc0248e9d59c14eedd7')"
        width="120">
        <template slot-scope="scope">
          {{ scope.row.createTime | createTime }}
        </template>
      </el-table-column>
      <el-table-column
        prop="realname"
        :label="$t('components.WkImport.7f1ec85570a9e88c7dacc2bdbfa9f298')"
        width="80">
        <template slot-scope="scope">
          <wx-open-data :openid="scope.row.realname" />
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        :label="$t('components.WkImport.9648bbb200761aeda662519addf9526a')">
        <template slot-scope="scope">
          {{ $t('components.WkImport.dc62eb9447626c976d5c81a5ab1e6b1e',{1:scope.row.title,2:getImportContent(scope.row.title, scope.row.content)}) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="option"
        width="150"
        :label="$t('components.WkImport.58fadf26112b5abdebb14d7004e01068')">
        <template slot-scope="scope">
          <template v-if="getErrorNum(scope.row.content) > 0">
            <el-button
              v-if="scope.row.valid == 1"
              type="primary-text"
              style="padding: 0;"
              @click="downloadError(scope.row.messageId)">
              {{ $t('components.WkImport.6bfbbdccef7e66b58f0a57e5ba062fa5') }}
            </el-button>
            <span v-else-if="scope.row.valid == 0" class="invalid-tips">
              {{ $t('components.WkImport.14d97af9045448056c7ea39275bd4ee0') }}
            </span>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <div class="import-history__ft">
      <el-button type="primary" @click="closeClick">
        {{ $t('components.WkImport.f649c1dc057ed260820a29e5d77c4ac6') }}
      </el-button>
    </div>
  </div>
</template>

<script>
import { systemMessageListAPI } from '@/api/common'
import {
  crmDownImportErrorAPI
} from '@/api/crm/common'

import { downloadExcelWithResData } from '@/utils/index'

export default {
  // 导入历史
  name: 'CRMImportHistory',
  components: {},
  filters: {
    createTime(time) {
      const times = time.split(' ')
      return times.length > 0 ? times[0] : ''
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    // CRM类型
    crmType: {
      type: String,
      default: ''
    },
    // moduleType
    props: Object
  },
  data() {
    return {
      loading: false,
      tableList: []
    }
  },
  computed: {},
  watch: {
    show(value) {
      if (value) {
        this.getList()
      }
    }
  },
  mounted() {},

  beforeDestroy() {},
  methods: {
    getList() {
      this.loading = true
      systemMessageListAPI({
        page: 1,
        limit: 9999,
        type: {
          customer: 14,
          contacts: 16,
          leads: 18,
          business: 160,
          contract: 161,
          invoice: 162,
          receivables: 163,
          receivablesPlan: 164,
          visit: 165,
          marketing: 166,
          product: 20,
          visit: 43,
          hrm: 50
        }[this.crmType] || this.props.moduleType
      })
        .then(res => {
          this.loading = false
          this.tableList = res.data.list
        })
        .catch(() => {
          this.loading = false
        })
    },

    /**
     * 下载错误数据
     */
    downloadError(messageId) {
      crmDownImportErrorAPI({ messageId })
        .then(res => {
          downloadExcelWithResData(res)
        })
        .catch(() => {
        })
    },

    getImportContent(totalSize, content) {
      const list = content.split(',') || []
      const updateSize = Number(list[1] || '0')
      const errSize = Number(list[0] || '0')
      return this.$t('components.WkImport.87cc7720d54df60ec834f3e47b8dc906', { 1: updateSize, 2: totalSize - errSize, 3: errSize })
    },

    /**
     * 获取错误数据数
     */
    getErrorNum(content) {
      const list = content.split(',') || []
      const errSize = Number(list[0] || '0')
      return parseInt(errSize)
    },

    /**
     * 关闭
     */
    closeClick() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.import-history {
  &__hd {
    padding: 20px;
    padding-bottom: 10px;
  }

  &__title {
    font-size: 16px;
    font-weight: 600;
    color: $--color-text-primary;
  }

  &__des {
    font-size: 12px;
    color: #ccc;
  }

  &__bd {
    border-top: 1px solid #e6e6e6;
  }

  &__ft {
    padding: 10px;
    text-align: right;
    background-color: #f7f8fa;
  }

  .xr-icon-close-btn {
    float: right;
  }
}

.invalid-tips {
  color: $--color-text-secondary;
}
</style>
